<template lang="pug">
  div.main-content
    p.modular-title {{modularTitle}}
    el-select.search-criteria(v-for="(item, index) in selectData" :key="index" :placeholder="item.placeholder" v-model="item.value")
      el-option(v-for="(optionItem) in item.options" :key="optionItem.value" :label="optionItem.label" :value="optionItem.value")
    el-button.search-btn(v-if="selectData.lengh>0") 查询
</template>

<script>
  export default {
    name: 'MainContent',
    props: {
      modularTitle: String,
      selectArray: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        selectData: this.selectArray
      }
    }
  }
</script>

<style scoped lang="stylus">
  .main-content
    margin-top 43px

  .modular-title
    color #fff
    font-size 20px
    margin-bottom 20px

  .search-btn
    background-color #0f5abc
    color #fff

  .search-btn:hover
    background-color rgba(0, 0, 0, 0.15)
</style>
